@import "sanitize.css";
@import "open-props/open-props.min.css";

:root {
  --primary-bg-color: #f9fafb;
  --primary-bg-color-transparent: rgba(247, 249, 250, 0.85);
  --primary-bg-color-highlight: white;
  --selected-stroke-color: #2c75d5;
  --selected-border-color: #0e2d57;
  --selected-bg: rgb(238, 245, 255);
  --hover-bg: rgba(161, 204, 247, 0.2);
  --primary-fg-color: #37373a;
  --primary-fg-color-faded: rgb(242, 244, 246);
  --secondary-color: #536390;
  --separator-color: #e6e6ea;
  --separator-color-dark: #dedee3;
  --separator-size: 0.5px;
  --bg-color: #fff;
  --bg-color-shaded: #f9fafb;

  --selected-text-color: #1064c9;
  --selected-text-color-subdued: #508dde;
  --selected-text-color-subdued-more: #84b6f3;
  --font-color-subtext: #86868f;
  --font-color-subtext-dark: #536473;

  --shadow-overlay: 0px 10px 15px rgba(32, 37, 46, 0.05),
    0px 3px 5px rgba(23, 26, 33, 0.1);
  --font-family-code: "JetBrains Mono", Menlo, Consolas, Monaco, Liberation Mono,
    Lucida Console, monospace;
  --font-family-system: Inter, Roboto, "Helvetica Neue", "Arial Nova",
    "Nimbus Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";

  --input-bg-color: var(--primary-bg-color-highlight);

  --font-weight-light: 200;
  --font-weight-regular: 400;
  --font-weight-bold: 600;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.5rem;
  --font-size-regular: 0.9rem;

  --header-height: 2rem;
}

@media (max-width: 480px) {
  :root {
    --font-size-xl: 1.4rem;
  }
}

body {
  color: var(--primary-fg-color);
  background: var(--primary-bg-color);
  font-family: var(--font-family-system);
  font-size: var(--font-size-regular);
}

input {
  font-weight: 300;
  appearance: none;
  color: var(--primary-fg-color);
  background: var(--input-bg-color);
  font-family: var(--font-family-code);
  border-radius: 5px;
  outline: none;
  border: none;
  caret-color: var(--selected-stroke-color);
}

::placeholder {
  font-weight: var(--font-weight-light);
  color: var(--font-color-subtext);
  /*    font-family: var(--font-family-system);*/
}

a {
  text-decoration: none;
  color: var(--selected-text-color);
}
